// @ts-nocheck
import React, { Component } from 'react';

// 引入store
import store from '../../redux/store'

class Count extends Component {


  componentDidMount () {
    store.subscribe (() => {
      this.setState ({})
    })
  }
  increment = () => {
    // console.log (this.selectNum)
    const {value} = this.selectNum
    store.dispatch ({type: 'increment', data: value*1})
  }

  decrement = () => {
    const {value} = this.selectNum
    store.dispatch ({type: 'decrement', data: value*1})
  }

  incrementIfOdd = () => {
    const {value} = this.selectNum
    const count = store.getState()
    if (count%2 !== 0) {
      store.dispatch ({type: 'increment', data: value*1})
    }
  }

  incrementAsync = () => {
    const {value} = this.selectNum
    setTimeout (() => {
      store.dispatch ({type: 'increment', data: value*1})
    }, 2000)
  }

  render() {
    return (
      <div>
        <h1>求和为： {store.getState()}</h1>
        <select  ref={c => this.selectNum = c}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select> &nbsp;
        <button onClick={this.increment}>+</button>&nbsp;
        <button onClick={this.decrement}>-</button>&nbsp;
        <button onClick={this.incrementIfOdd}>和为奇数 +</button>&nbsp;
        <button onClick={this.incrementAsync}>异步 +</button>&nbsp;
      </div>
    );
  }
}

export default Count;
